<template>
  <div class="partB0">
    <div class="partB01" @click="popupBtn">
      <u-icon name="bell-fill"></u-icon>
      <!-- <image class="partB012" src="/static/imgs/h3.png"></image> -->
      <div class="partB011">
        <div class="partB0111" :style="topMsgStyle">{{ topmsg }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    topmsg: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      topMsgStyle: '',
      leftNum: 0,
      timer: null,
    }
  },
  mounted() {
    let _this = this
    function move() {
      delay()
      _this.leftNum = _this.leftNum + 1
      if (_this.leftNum > _this.topLength) {
        _this.leftNum = 0
      }
      if (_this.topLength > uni.upx2px(660)) {
        _this.topMsgStyle = `
          transform: translateX(-${_this.leftNum}px);
        `
      }
    }

    function delay() {
      if (_this.leftNum === 0) {
        if (_this.timer) clearInterval(_this.timer)
        setTimeout(() => {
          _this.timer = setInterval(() => {
            move()
          }, 1000 / 60)
        }, 1000)
      }
    }

    move()
  },
  computed: {
    topLength() {
      let temp = this.topmsg
      if (temp) {
        let aa1 = temp.match(/[\x00-\xff]/g) || []
        let aa2 = temp.match(/[^\x00-\xff]/g) || []
        let bb1 = aa1.join('').length
        let bb2 = aa2.join('').length
        return bb1 * uni.upx2px(13) + bb2 * uni.upx2px(26)
      } else {
        return 0
      }
    },
  },
  methods: {
    popupBtn() {
      uni.showModal({
        title: '',
        content: this.topmsg,
        showCancel: false,
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.partB0 {
  width: 100%;
  height: 64rpx;
}
.partB01 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64rpx;
  background: #fff;
  padding: 0 28rpx;
  display: flex;
  align-items: center;
  z-index: 99;
}
.partB011 {
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  align-items: center;
}
.partB012 {
  width: 30rpx;
  height: 30rpx;
}
.partB0111 {
  display: inline-block;
  font-size: 24rpx;
  line-height: 30rpx;
  color: #212223;
}
</style>
